<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="search">
				<up-search placeholder="搜索" v-model="keyword" :show-action="false"></up-search>
			</view>
			<view class="content">
				<view class="items" v-for="(item, index) in dataList" :key="index" @click="routerLink(item)">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="nameTime">
						<!-- <view class="name">
							{{ item.name }}
						</view> -->
						<view class="time">
							{{ formatTime(item.publish_date) }}
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import { getCategoryList } from '@/api/api.js'
import dayjs from 'dayjs';

export default {
	data() {
		return {
			keyword: '',
			dataList: []
		};
	},
	methods: {
		routerLink(item) {
			// uni.setStorageSync('currentData', item)
			// uni.navigateTo({
			// 	url: './noticeDetails'
			// });
			uni.setStorageSync('currentData', { item: item, isTitle: false })
			uni.navigateTo({
				url: '/pages/contentDetail/index'
			})
		},
		queryList(pageNo, pageSize) {
			getCategoryList({
				category_name: '园区通知',
				page: pageNo,
				limit: pageSize,
				title: this.keyword
			}).then(res => {
				this.$refs.paging.complete(res.data.data)
			})
			// let data = [{
			// 	content: '关于小星星小星星小星星谢谢',
			// 	name: '想学习',
			// 	time: '2024-11-18'
			// },
			// {
			// 	content: 'asdasdasdasdasdasdaaaasdasdasdasdasdasdasdasdasdasdasd',
			// 	name: '想学习',
			// 	time: '2024-11-18'
			// }
			// ]
			// this.$refs.paging.complete(data)
			// this.$request.queryList({
			// 	pageNo,
			// 	pageSize
			// }).then(res => {
			// 	this.$refs.paging.complete(res.data.list);
			// }).catch(res => {
			// 	this.$refs.paging.complete(false);
			// })
		},
		formatTime(time) {
			return dayjs(time).format('YYYY年MM月DD日');
		},
	}
}
</script>

<style lang="scss">
.container {
	background-color: #f5f5f5;
	height: 100vh;

	.search {
		padding: 18rpx 25rpx;
		background-color: #fefefe;
	}

	.content {
		background-color: #f5f5f5;


		.items {
			margin: 20rpx 25rpx 0 25rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 30rpx;

			.title {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}

			.nameTime {
				font-size: 25rpx;
				color: #9ea8cc;
				display: flex;

				.name {
					flex: 1;
					text-align: left;
				}

				.time {
					text-align: right;
				}
			}
		}
	}

}
</style>